<template>
  <div class="step-form-wrapper">
    <el-form :model="warehouseForm" label-width="80px" class="form-section">
      <h4 class="form-section-title">| 基本信息</h4>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="仓库名称" class="required-field">
            <el-input v-model="warehouseForm.name" size="large" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓库地址" class="required-field">
            <el-input v-model="warehouseForm.address" size="large" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="电话">
            <el-input v-model="warehouseForm.phone" size="large" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人">
            <el-input v-model="warehouseForm.principal" size="large" />
          </el-form-item>
        </el-col>
      </el-row>

      <h4 class="form-section-title">| 仓库品牌</h4>
      <el-form-item class="brand-checkboxes">
        <el-checkbox-group v-model="warehouseForm.brands">
          <el-row :gutter="20">
            <el-col :span="3" v-for="brand in availableBrands" :key="brand">
              <el-checkbox :label="brand" border>{{ brand }}</el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <div class="action-separator">
      <el-button type="primary" @click="saveWarehouse" class="save-btn">保存并新增</el-button>
    </div>

    <el-table :data="warehouseList" border class="data-table">
      <el-table-column prop="id" label="序号" width="60" />
      <el-table-column prop="name" label="仓库名称" />
      <el-table-column prop="address" label="仓库地址" />
      <el-table-column prop="principal" label="负责人" width="100" />
      <el-table-column prop="phone" label="电话" width="150" />
      <el-table-column prop="brandCount" label="仓库品牌" width="100" />
      <el-table-column label="操作"  >
          <template #default>
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small" style="color: red;">删除</el-button>
          </template>
      </el-table-column>
    </el-table>

    <div class="bottom-nav">
      <el-button @click="emit('prev')" class="prev-btn">上一步</el-button>
      <el-button type="success" @click="handleNext" class="next-btn">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['next', 'prev']);
const availableBrands = ['品牌A', '品牌B', '品牌C', '品牌D', '品牌E', '品牌A', '品牌B', '品牌C', '品牌D', '品牌E'];
const warehouseForm = ref({ name: '默认仓库', address: '', phone: '', principal: '', brands: ['品牌A', '品牌B'] });
const warehouseList = ref([
  { id: 1, name: '南京市仓库', address: '南京市玄武区大行宫', principal: '王某某', phone: '1772707072', brandCount: '2个' },
  { id: 2, name: '默认仓库', address: '南京市玄武区大行宫', principal: '任某某', phone: '1777077077', brandCount: '5个' },
]);

const saveWarehouse = () => { console.log('保存仓库:', warehouseForm.value); };
const handleNext = () => { emit('next'); };
</script>

<style scoped>
/* 通用样式 */
.form-section { padding: 20px 0; }
.action-separator { text-align: center; margin: 30px 0; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.bottom-nav { margin-top: 20px; display: flex; justify-content: space-between; }
.required-field :deep(.el-form-item__label)::before { content: '*'; color: red; margin-right: 4px; }
.save-btn { background-color: #409eff; border-color: #409eff; }
.prev-btn { background-color: #fff; color: #333; border: 1px solid #ccc; }
.next-btn { background-color: #55b95a; border-color: #55b95a; }

/* 仓库特定样式 */
.form-section-title { margin: 15px 0; font-weight: bold; font-size: 14px; color: #333; }
.brand-checkboxes .el-checkbox { margin-right: 10px; margin-bottom: 10px; border-radius: 4px; }
.brand-checkboxes :deep(.el-checkbox__label) { font-size: 12px; }
</style>